<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org" th:with="title='Ai在线绘画-生成页面',active='cate'">
<head th:replace="/header::headerFragment(title,active)">
<!--  <meta charset="UTF-8">-->
<!--  <title>Ai在线绘画-生成页面</title>-->
<!--  <link href="css/bootstrap.min.css" rel="stylesheet">-->
<!--  <script type="text/javascript" src="js/jquery.min.js"></script>-->
<!--  <script type="text/javascript" src="js/bootstrap.min.js"></script>-->
</head>
<body>
<div th:replace="/header::header-body"></div>

<div class="container-fluid bg-info" >
<!--  表单-->
  <form class="form-inline" th:action="@{/generate}" th:object="${generate_post}"  method="post"  id="generate-form" enctype="multipart/form-data">
    <div class="row">
      <div class="col-xs-12">
        <label for="prompt">正向标签</label>
        <textarea class="form-control" id="prompt" name="prompt" th:field="*{prompt}" placeholder="输入正向描述词" style="height:100px;width:700px"> </textarea>
        <!--      <input type="text" class="form-control" id="prompt" name="prompt" th:field="*{prompt}" placeholder="Jane Doe">-->
      </div>
    </div>
    <div class="row">
      <div class="col-xs-12">
        <label for="uc">反向标签</label>
<!--        <input type="text" class="form-control" id="uc" name="uc" th:field="*{uc}" placeholder="Jane Doe">-->
        <textarea class="form-control" id="uc" name="uc" th:field="*{uc}" placeholder="输入反向描述词" style="height:100px;width:700px"> </textarea>

      </div>

    </div>


    <div class="row">
      <div class="col-lg-12">
        <div class="input-group">
          <div class="input-group-btn">
            <button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">分辨率设置 <span class="caret"></span></button>
            <ul class="dropdown-menu">
              <span class="label label-info">一般大小</span>
              <li><a href="#" onclick="resolution_set(512,768)">竖向512 X 768</a></li>
              <li><a href="#" onclick="resolution_set(768,512)">横向768 X 512</a></li>
              <li><a href="#" onclick="resolution_set(640,640)">方形640 X640</a></li>
              <li role="separator" class="divider">小图片</li>
              <span class="label label-info">小图片</span>
              <li><a href="#" onclick="resolution_set(384,640)">竖向384 X 640</a></li>
              <li><a href="#" onclick="resolution_set(640,384)">横向640 X 384</a></li>
              <li><a href="#" onclick="resolution_set(512,512)">方形512 X 512</a></li>

              <li role="separator" class="divider">大</li>
              <span class="label label-info">大图片</span>
              <li><a href="#" onclick="resolution_set(512,1024)">竖向512 X 1024</a></li>
              <li><a href="#" onclick="resolution_set(1024,512)">横向1024 X 512</a></li>
              <li><a href="#" onclick="resolution_set(1024,1024)">方形1024 X 1024</a></li>

              <li role="separator" class="divider">小图片</li>
              <li><a href="#" onclick="resolution_rm_disabled()">自定义大小(在右侧输入)</a></li>

            </ul>
          </div><!-- /btn-group -->
          <div class="col-lg-5">
              <div class="form-group">
                <div class="input-group">
                  <div class="input-group-addon">长度</div>
                  <input type="text" class="form-control" id="width" name="width" th:field="*{width}" readonly="readonly">
                  <div class="input-group-addon">像素</div>
                </div>
              </div>
          </div>
          <div class="col-lg-5">
            <div class="form-group">
              <div class="input-group">
                <div class="input-group-addon">宽度</div>
                <input type="text" class="form-control" id="height" name="height" th:field="*{height}" readonly="readonly">
                <div class="input-group-addon">像素</div>
              </div>
            </div>
          </div>
        </div><!-- /input-group -->
      </div><!-- /.col-lg-6 -->
    </div><!-- /.row -->


    <div class="row">
      <div class="input-group">
        <div class="input-group-btn col-lg-6">
          <button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">算法选择:<span class="caret"></span></button>
          <ul class="dropdown-menu">
            <li><a href="#" onclick="sampler_set('k_euler_ancestral')">k_euler_ancestral(推荐)</a></li>
            <li><a href="#" onclick="sampler_set('k_euler')">k_euler</a></li>
            <li><a href="#" onclick="sampler_set('plms')">plms</a></li>
            <li><a href="#" onclick="sampler_set('ddim')">ddim</a></li>
          </ul>
        </div><!-- /btn-group -->
        <div class="col-lg-6">
          <div class="form-group">
            <div class="input-group">
              <input type="text" class="form-control" id="sampler" name="sampler" th:field="*{sampler}" readonly="readonly">
            </div>
          </div>
        </div>
      </div><!-- /input-group -->

    </div><!-- /.row -->


    <label for="scale">迭代循环</label>
      <input type="text" class="form-control" id="scale" name="scale" th:field="*{scale}" placeholder="Jane Doe">

    <label for="steps">步数</label>
     <input type="text" class="form-control" id="steps" name="steps" th:field="*{steps}" placeholder="Jane Doe">
    <label for="seed">种子</label>
     <input type="text" class="form-control" id="seed" name="seed" th:field="*{seed}" placeholder="可以留空">
    <label for="n_samples">图片个数</label>
    <input type="text" class="form-control" id="n_samples" name="n_samples" th:field="*{n_samples}" placeholder="Jane Doe">
    <label for="ucPreset">反向标签开关</label>
    <input type="text" class="form-control" id="ucPreset" name="ucPreset" th:field="*{ucPreset}" placeholder="Jane Doe">



    <div class="row">
      <div class="col-lg-6">
        <label for="strength" id="strength_label" style="display:none">强度</label>
        <input type="text" class="form-control" id="strength" name="strength" th:field="*{strength}" placeholder="控制上传的图像将被改变多少。较低的强度将生成更接近原始的图像。" style="display:none">
        <label for="noise" id="noise_label" style="display:none">噪声</label>
        <input type="text" class="form-control" id="noise" name="noise" th:field="*{noise}" placeholder="较高的噪声会增加添加到上传图像中的细节，但如果噪声过高会导致工件。" style="display:none">
      </div>

    </div><!-- /.row -->



    <!--    上传图片-->




    <div class="row">

      <div class="col-lg-6">
        <label for="image">上传图片(根据上传的图片生成)</label>


        <input class="form-control" type="file" name="image" id="image" th:value="*{image}" onchange="open_img_option()">


        <button type="button" class="btn btn-danger" id="del_img_button" onclick="del_up_image()" style="display:none">删除上传的文件</button>
      </div>


    </div><!-- /.row -->


    <button type="submit" onclick="generate_progress()" class="btn btn-primary btn-lg">开始生成</button>
  </form>

  <div class="progress">
    <div class="progress-bar progress-bar-striped active" id="generate_progress" role="progressbar" aria-valuenow="45" aria-valuemin="0" aria-valuemax="100" style="width:0%">
      <span class="sr-only">20% Complete</span>
    </div>
<!--    <script>-->

<!--      // Set the width to animate the progress bar-->
<!--      // Along with time duration in milliseconds-->
<!--      $(".progress-bar").animate({-->
<!--        width: "100%",-->
<!--      }, 80000);-->
<!--    </script>-->
  </div>
<!--  <div class="row">-->
<!--    <button type="button" onclick="generate_progress()">测试进度条的按钮</button>-->
<!--  </div>-->

  <!--  //控件触发-->
  <script type="text/javascript">
    let width,height;
    let sampler;
    function open_img_option(){
      document.getElementById("del_img_button").style.display="inline";
      document.getElementById("strength").style.display="inline";
      document.getElementById("strength_label").style.display="inline";
      document.getElementById("noise").style.display="inline";
      document.getElementById("noise_label").style.display="inline";
    }
    function del_up_image(){
      var element = document.getElementById('image');
      element.value = ''; 					//虽然test的value不能设为有字符的值，但是可以设置为空值
      document.getElementById("del_img_button").style.display="none";
      document.getElementById("strength").style.display="none";
      document.getElementById("strength_label").style.display="none";
      document.getElementById("noise").style.display="none";
      document.getElementById("noise_label").style.display="none";

    }

    function resolution_set(width,height){
      var element = document.getElementById("width");
      element.setAttribute("value",width);
      element.setAttribute("readonly","readonly");
      element = document.getElementById("height");
      element.setAttribute("readonly","readonly");
      element.setAttribute("value",height);
    }
    function resolution_rm_disabled(){
      var element = document.getElementById("width");
      element.removeAttribute("readonly")
      element = document.getElementById("height");
      element.removeAttribute("readonly")
    }

    function sampler_set(sampler){
      var element = document.getElementById("sampler");
      element.setAttribute("value",sampler)
    }

    function generate_progress(){
      /*获得目标元素*/
      var obj=document.getElementById('generate_progress');
      /*计时器，进行进度累加*/
      obj.animate({
        width: "100%",
      }, 80000);


    }
  </script>



</div>


<div th:replace="/footer::footer"></div>

</body>
</html>
